<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ASN历史 - Mubea</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="../source/css/base.css" rel="stylesheet" type="text/css" />
<link href="../source/css/main.css" rel="stylesheet" type="text/css" />
<link href="../source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />

</head>
    <div id="app" class="asn-history-page">
        <!--<div class="header">
            <div class="base-width cf">
                <a href="./main.html" class="fl">
                    <img class="logo" src="../source/img/logo.png" alt="" />
                </a>

                <el-dropdown class="username fr" v-if="username" v-cloak>
                      <span class="el-dropdown-link">
                        {{username}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                      </span>
                    <el-dropdown-menu class="username-dropdown" slot="dropdown">
                        <el-dropdown-item>
                            <a href="javascript:;" @click="loginout">退出</a>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>-->
        <asn-header></asn-header>

        <div class="base-width">
            <div class="banner">
                <img src="../source/img/asn_history_banner.png" alt="">
            </div>

            <el-form :inline="true" :model="historyForm" ref="historyForm" class="history-form">
                <el-form-item label="供应商号" v-if="type == 0">
                    <el-input v-model="historyForm.supply" placeholder="供应商号"></el-input>
                </el-form-item>
                <el-form-item label="物料号">
                    <el-input v-model="historyForm.materno" placeholder="物料号"></el-input>
                </el-form-item>
                <el-form-item label="采购订单号">
                    <el-input v-model="historyForm.PurchaseNo" placeholder="采购订单号"></el-input>
                </el-form-item>
                <el-form-item label="到货日期">
                    <el-date-picker
                            v-model="historyForm.createdate"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            clear-icon="el-icon-error"
                            placeholder="开始日期">
                    </el-date-picker>
                    <span>至</span>
                    <el-date-picker
                            v-model="historyForm.enddate"
                            format="yyyy-MM-dd"
                            clear-icon="el-icon-error"
                            value-format="yyyy-MM-dd"
                            placeholder="截止日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item class="search-form-item">
                    <el-button type="primary" class="search-btn" @click="onSearch('historyForm')">查询</el-button>

                    <el-button class="download-btn" @click="downloadOrder">EXCEL下载</el-button>
                </el-form-item>
            </el-form>

            <div class="download-box">

            </div>

            <div class="history-list">
                <el-table
                        v-loading="loading"
                        :data="listData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="ConsigneeName"
                            label="Consignee Name"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="ConsigneeAddress"
                            label="Consignee Address"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Vendorno"
                            label="Vendor no."
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="POnumber"
                            label="PO number"
                            width="220">
                    </el-table-column>
                    <el-table-column
                            prop="Supplierdeliverynote"
                            label="Supplier delivery note"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Item"
                            label="Item">
                    </el-table-column>
                    <el-table-column
                            prop="Deliverydate"
                            label="Delivery date"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="Windowtime"
                            label="Window time"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Materialno"
                            label="Material no."
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Vendormaterialno"
                            label="Vendor material no."
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="Deliveryqty"
                            label="Delivery qty"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="Batch"
                            label="Batch"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="Packagematerial"
                            label="Package material"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="Packageqty"
                            label="Package qty."
                            width="180">
                    </el-table-column>
                </el-table>
            </div>

            <div class="pages tr" v-if="pageTotal > pageInfo.pagecount">
                <el-pagination
                        background
                        @current-change="currentChange"
                        layout="prev, pager, next, jumper, ->"
                        :current-page="historyForm.pageindex"
                        :page-size="pageInfo.pagecount"
                        :total="pageTotal">
                </el-pagination>
            </div>

        </div>
    </div>



<script src="../source/js/lib/vue.min.js"></script>
<script src="../source/js/lib/jquery.min.js"></script>
<script src="../source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="../source/js/common.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            "username":decodeURIComponent(getCookie('username')),
            loading:false,
            type:'',
            historyForm: {
                "materno":"",				        /*物料号*/
                "PurchaseNo":"",				 /*采购订单号*/
                "supply":"",				        /*供应商号*/
                "createdate":"",				    /*创建日期*/
                "enddate":"",				    /*截至日期*/
                "username":decodeURIComponent(getCookie('username')),			       /*用户名*/
                "pwd":"",				    		   /*密码*/
                "account":user.account,		   /*账套实例*/
                "pageindex":1,
                "pagecount":pageInfo.pagecount
            },
            pageTotal:1,
            listData: []
        },
        methods:{
            apiGetAsnList:function(){
                var _this = this;
                this.loading = true;
                $.ajax({
                    url:apiUrl+'/ASNQuery',
                    type:'GET',
                    data:{'json':JSON.stringify(_this.historyForm)},
                    cache:false,
                    //dataType :'jsonp',
                    success:function(datas){
                        if(datas.Success===true){
                            _this.listData = datas.OrderLists ;
                            _this.pageTotal = datas.Count;
                        }else{
                            datas.Msg &&  _this.$message.error(datas.Msg);
                        }

                        // _this.listData = datas.OrderLists;
                    },
                    error:function(datas){
                        // console.log(datas)
                        datas.Msg && _this.$message.error(datas.Msg);
                    },
                    complete:function(){
                        _this.loading = false;
                    }
                });
            },
            currentChange:function(cur){
                console.log(cur)
                var _this = this;
                this.historyForm.pageindex = cur;
                this.$nextTick(function(){
                    _this.apiGetAsnList();
                })
            },
            onSearch:function() {
                var _this = this;
                if(this.historyForm.createdate && this.historyForm.enddate){
                    var sTime = new Date(this.historyForm.createdate.replace(/-/g,'/')).getTime();
                    var eTime = new Date(this.historyForm.enddate.replace(/-/g,'/')).getTime();
                    if( sTime > eTime){
                        this.$message.error('截止日期必须大于等于开始日期');
                        return false;
                    }
                }
                this.historyForm.pageindex = 1;
                this.$nextTick(function(){
                    _this.apiGetAsnList();
                })
            },
            downloadOrder:function(){
                window.location.href = apiUrl2+'/ASNExport?json='+JSON.stringify(this.historyForm);
            },
            /*isLogin:function(){
                var username = getCookie('username');
                var type = getCookie('type');
                if(username && username != 'undefined' && type &&  type != 'undefined'){
                    return true;
                }
                return false;
            },
            loginout:function(){
                removeCookie('username');
                removeCookie('type');
                location.href='./login.html';
            }*/
        },
        created:function(){
            this.type = getCookie('type');
            // if(this.isLogin()){ //登录
            //     this.onSearch();
            // }else{
            //     location.href = './login.html';
            // }
        },
        mounted:function(){
            this.onSearch();
        }
    })
</script>
</body>
</html>